<template>  <div class="word-statistics">
    <div class="stat-card theme-pink">
      <div class="stat-title">{{ reviewPlan.title }}</div>
      <div class="stat-value">{{ reviewWordCount }}</div>
      <div class="stat-label">Words</div>
    </div>
    <div class="stat-card theme-green">
      <div class="stat-title">{{ learningProgress.title }}</div>
      <div class="stat-value">{{ learnedWordCount }}/{{ totalWordCount }}</div>
      <div class="stat-label">Progress</div>
    </div>
  </div>
</template>

<script>
import TextCard from "../TextCard.vue";

export default {
  name: "WordStatistics",
  components: {
    TextCard,
  },
  props: {
    reviewWordCount: {
      type: [Number, String],
      default: 0
    },
    learnedWordCount: {
      type: [Number, String], 
      default: 0
    },
    totalWordCount: {
      type: [Number, String],
      default: 0
    }
  },
  computed: {
    reviewPlan() {
      return {
        title: "复习计划",
        content: `${this.reviewWordCount} Words`
      };
    },
    learningProgress() {
      return {
        title: "学习进度", 
        content: `${this.learnedWordCount} / ${this.totalWordCount} Words`
      };
    }
  }
};
</script>

<style scoped>
.word-statistics {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  height: 100%;
  min-height: 279px;
  flex: 1;
  min-width: 300px;
  max-width: 440px;
  gap: 15px;
}

.stat-card {
  flex: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (max-width: 707px) {
  .word-statistics {
    width: 100%;
    min-height: 231px;
    min-width: unset;
    max-width: unset;
  }
}
</style>
